<!-- 商品详情 -->
<template>
    <div>
        <a-page-header
            style="border: 1px solid rgb(235, 237, 240);background:#fff"
            :title="name"
            sub-title="商品详情"
            @back="() => $router.go(-1)"
        >
      <!-- <template slot="extra">
        <a-button key="3">
          Operation
        </a-button>
        <a-button key="2">
          Operation
        </a-button>
        <a-button key="1" type="primary">
          Primary
        </a-button>
      </template>
       -->
      <div class="content">
        <div class="main">
          <a-descriptions size="small" :column="3">
            <a-descriptions-item label="商品名称">
                 <a-input v-model="goods.goodsName"  placeholder="请输入商品名称" />
            </a-descriptions-item>
             <a-descriptions-item label="商品分类">
                 <a-select v-model="oneClassify" style="width: 120px"  @change="classifyOneChange"  >
                    <a-select-option v-for="(one,index) in classifyOneList" :key="one.id">
                        {{ one.cateName }}
                    </a-select-option>
                    </a-select>
                    - 
                     <a-select v-model="twoClassify" style="width: 120px"   >
                    <a-select-option v-for="(two,index) in classifyTwoList" :key="two.id">
                        {{ two.cateName }}
                    </a-select-option>
                    </a-select>
            </a-descriptions-item>
             <a-descriptions-item label="商品分类">
                  <a-select v-model="goods.specialCateId" style="width: 120px"   >
                    <a-select-option v-for="(two,index) in specialCateList" :key="two.id">
                        {{ two.cateName }}
                    </a-select-option>
                    </a-select>
            </a-descriptions-item>
             <!-- <a-descriptions-item label="商品积分">
                 <a-input v-model="goods.integral"  addon-after="分"   placeholder="请输入积分" />
            </a-descriptions-item> -->
             <a-descriptions-item label="商品运费">
                 <a-input v-model="goods.freight" addon-after="元"    placeholder="请输商品运费" />
            </a-descriptions-item>
              <a-descriptions-item label="是否上架">
                 <a-radio-group v-model="goods.status" >
                    <a-radio  v-for="(item,i) in statusList" :key="i" :value="item.id">{{item.name}}</a-radio>
                </a-radio-group>
            </a-descriptions-item>
             <!-- <a-descriptions-item label="展示为普通商品">
                 <a-radio-group v-model="goods.isGeneralMall" >
                    <a-radio  v-for="(item,i) in statusList" :key="i" :value="item.id">{{item.name}}</a-radio>
                </a-radio-group>
            </a-descriptions-item>
            <a-descriptions-item label="是否推荐">
                 <a-radio-group v-model="goods.isRecommend" >
                    <a-radio  v-for="(item,i) in statusList" :key="i" :value="item.id">{{item.name}}</a-radio>
                </a-radio-group>
            </a-descriptions-item> -->
             <a-descriptions-item label="供应商">
                 <a-select v-model="goods.makeId" style="width: 120px"   >
                    <a-select-option v-for="(one,index) in goodsBrandList" :key="one.id">
                        {{ one.makeName }}
                    </a-select-option>
                    </a-select>
            </a-descriptions-item>
             <a-descriptions-item label="普通商城排序">
                <a-badge count="排序值越大越靠前">
                    <a-input v-model="goods.sort"  placeholder="请输入排序数字" />
                </a-badge>
            </a-descriptions-item>
             <!-- <a-descriptions-item label="拼团排序">
                 <a-input v-model="goods.groupSort" placeholder="请输入积分" />
            </a-descriptions-item>
             <a-descriptions-item label="新人专享排序">
                 <a-input v-model="goods.newPeopleSort" placeholder="请输入积分" />
            </a-descriptions-item> -->
          </a-descriptions>
            <a-descriptions size="small" :column="1">
             <!-- <a-descriptions-item label="">
                <div style="color: #f5222d">排序值越大越靠前</div>
            </a-descriptions-item> -->
            <!-- <a-descriptions-item label="是否新人专享">
                    <a-radio-group v-model="goods.isNewPeople" >
                        <a-radio  v-for="(item,i) in statusList" :key="i" :value="item.id">{{item.name}}</a-radio>
                    </a-radio-group>
                </a-descriptions-item>
            <a-descriptions-item label="是否拼团">
                <a-radio-group v-model="goods.isGroupWork" >
                    <a-radio  v-for="(item,i) in statusList" :key="i" :value="item.id">{{item.name}}</a-radio>
                </a-radio-group>
                <span v-if="goods.isGroupWork==1">
                    <a-input style="width:200px" addon-before="单次购买数量" v-model="goods.groupBuyQuantityLimit" addon-after="次"  placeholder="请输入拼团价格" />
                </span>
            </a-descriptions-item> -->
            <a-descriptions-item label="商品图片">
                <a-upload
                    name="avatar"
                    list-type="picture-card"
                    class="avatar-uploader"
                    :show-upload-list="false"
                    @change="handleChange"
                >
                    <img v-if="goods.defaultPicture"  style="width:140px;height:140px"  :src="goods.defaultPicture" alt="avatar" />
                    <div v-else>
                    <a-icon :type="loading ? 'loading' : 'plus'" />
                    <div class="ant-upload-text">
                        选择图片
                    </div>
                    </div>
                </a-upload>
            </a-descriptions-item>
            <a-descriptions-item v-if="goodsId!=''" label="商品轮播图">
                 <a-upload style="width:1000px"
                    list-type="picture-card"
                    :file-list="bannerList"
                    @preview="handlePreview"
                    @change="bannerChange"
                    :remove="removeBanner"
                    >
                    <div v-if="bannerList.length < 8">
                        <a-icon type="plus" />
                        <div class="ant-upload-text">
                        Upload
                        </div>
                    </div>
                    </a-upload>
                    <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
                    <img alt="example" style="width: 100%" :src="previewImage" />
                    </a-modal>
            </a-descriptions-item>  
             <a-descriptions-item v-if="goodsId!=''" label="商品详情图">
                 <a-upload style="width:1000px"
                    list-type="picture-card"
                    :file-list="detailPic"
                    @preview="handlePreview"
                    @change="picChange",
                    :remove="removeBanner"
                    >
                    <div v-if="detailPic.length < 8">
                        <a-icon type="plus" />
                        <div class="ant-upload-text">
                        Upload
                        </div>
                    </div>
                    </a-upload>
                    <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
                    <img alt="example" style="width: 100%" :src="previewImage" />
                    </a-modal>
            </a-descriptions-item>  
            
             <a-descriptions-item label="是否多规格">
                  <!-- @change="specRadioChange" -->
                <a-radio-group v-model="goods.isMoreSpec" >
                    <a-radio  :disabled="goods.id==''?false:true"  v-for="(item,i) in specStatusList" :key="i" :value="item.id">{{item.name}}</a-radio>
                </a-radio-group>
                <span v-if="goods.isMoreSpec==1 && goodsId!='' ">
                     <a-select v-model="goods.specTemplateId" style="width: 120px" placeholder="请选择模版"   @change="specTempplatChange"  >
                            <a-select-option  v-for="(spec,index) in specTemplateList" :key="spec.id">
                                {{ spec.templateName }}
                            </a-select-option>
                    </a-select> 
                </span>
            </a-descriptions-item>
           <a-descriptions-item label="规格属性" v-if="goods.isMoreSpec==1  && goodsId!='' && goods.specTemplateId!='' " >
                 <a-form  style="min-width:500px"  :label-col="{ span: 6 }" :wrapper-col="{ span:18 }" >
                    <a-form-item  label="规格内容" >
                        <a-tag
                        :key="tag"
                        color="pink"
                        v-for="tag in ruleNameList"
                        closable
                        :disable-transitions="false"
                        @close="handleClosesRuleName(tag)">
                        {{tag}}
                        </a-tag>
                        <a-input-search
                        enter-button="添加"
                        class="input-new-tag"
                        v-if="ruleNameVisible"
                        v-model="ruleNameInput"
                        ref="saveTagRuleName"
                        size="small"
                        style="width:200px"
                        @search="handleRuleNameConfirm"
                     
                        >
                        </a-input-search>
                        <a-button v-if="!ruleNameVisible && ruleNameList.length<2" class="button-new-tag " size="small" @click="showRuleName">+ 添加规格名称</a-button>
                    </a-form-item>
                        <a-form-item :label="ruleNameList[0]" v-if="ruleNameList.length>=1" >
                        <a-tag
                        :key="tag"
                        color="orange"
                        v-for="tag in specNameOne"
                        closable
                        :disable-transitions="false"
                        @close="handleCloseSpecNameOne(tag)">
                        {{tag}}
                        </a-tag>
                        <a-input-search
                        enter-button="添加"
                        class="input-new-tag"
                        v-if="specNameOneVisible"
                        v-model="specNameOneInput"
                        ref="saveTagSpecNameOne"
                        size="small"
                         style="width:200px"
                        @search="handleSpecNameOneConfirm"
                        >
                        </a-input-search>
                        <a-button v-if="!specNameOneVisible " class="button-new-tag " size="small" @click="showSpecNameOne">+ 添加属性</a-button>
                    </a-form-item>
                    <a-form-item :label="ruleNameList[1]" v-if="ruleNameList.length>=2" >
                        <a-tag
                        :key="tag"
                        v-for="tag in specNameTwo"
                        closable
                        :disable-transitions="false"
                        @close="handleCloseSpecNameTwo(tag)">
                        {{tag}}
                        </a-tag>
                        <a-input-search
                         enter-button="添加"
                        class="input-new-tag"
                        v-if="specNameTwoVisible"
                        v-model="specNameTwoInput"
                        ref="saveTagSpecNameTwo"
                        size="small"
                         style="width:200px"
                        @search="handleSpecNameTwoConfirm"
                        >
                        </a-input-search>
                        <a-button v-if="!specNameTwoVisible " class="button-new-tag " size="small" @click="showSpecNameTwo">+ 添加属性</a-button>
                    </a-form-item>
                    <a-form-item  label="   " v-if="ruleNameList.length>0 && specNameOne.length>0" >
                        <a-button type="primary" class=""  @click="_goodsSpecAdd(1)" style="width: 260px;" >生成商品属性</a-button>
                    </a-form-item> 
                </a-form>
            </a-descriptions-item >
             
                <a-descriptions-item v-if="goodsId!=''" label="商品属性">
                     <a-table size="small" :columns="columns"  :pagination='false'  :data-source="specList"  >
                     <template slot="imageUrl" slot-scope="text, record">
                         <a-upload
                            name="avatar"
                            list-type="picture-card"
                            class="avatar-uploader"
                            :show-upload-list="false"
                            @change="specChange($event,record.id)"
                            style="width:80px;height:80px"
                        >
                            <img v-if="record.imageUrl"  style="width:80px;height:80px"  :src="record.imageUrl" alt="avatar" />
                            <div v-else>
                            <a-icon :type="loading ? 'loading' : 'plus'" />
                            <div class="ant-upload-text">
                                选择图片
                            </div>
                            </div>
                        </a-upload>
                    </template>
                    
                     <template slot="ruleNameOne" slot-scope="text, record">
                         <div>{{record.ruleNameOne}}:{{record.specNameOne}}</div>
                     </template>
                      <template slot="ruleNameTwo" slot-scope="text, record">
                         <div>{{record.ruleNameTwo}}:{{record.specNameTwo}}</div>
                     </template>
                     <template slot="costPrice" slot-scope="text, record">
                          <a-input   v-model="record.costPrice"   prefix="￥" type="number"  placeholder="请输入成本价" />
                     </template>
                      <template slot="marketValue" slot-scope="text, record">
                           <a-input  v-model="record.marketValue"  type="number"  prefix="￥"   placeholder="请输入市场价" />
                     </template>
                      <template slot="price" slot-scope="text, record">
                           <a-input  v-model="record.price"  type="number"  prefix="￥"  placeholder="请输入售价" />
                     </template>
                     <template slot="groupPrice" slot-scope="text, record">
                           <a-input  v-model="record.groupPrice"type="number" prefix="￥"  placeholder="请输入拼团价" />
                     </template>
                      <template slot="newPeoplePrice" slot-scope="text, record">
                           <a-input  v-model="record.newPeoplePrice"  type="number" prefix="￥"  placeholder="请输入新人专享" />
                     </template>
                       <template slot="stock" slot-scope="text, record">
                           <a-input  v-model="record.stock"  type="number"    placeholder="请输入库存" />
                     </template>
                         <template slot="salesVolume" slot-scope="text, record">
                           <a-input  v-model="record.salesVolume" type="number"     placeholder="请输入销量" />
                     </template>
                      <template slot="operation" slot-scope="text, record">
                            <div class="editable-row-operations">
                                <a-button type="link" @click="_updateSpecInfo([record])">修改</a-button>
                                <a-popconfirm
                                    title="是否确认删除当前数据?"
                                    ok-text="Yes"
                                    cancel-text="No"
                                    @confirm="delSpec([record])"
                                >
                                    <a-button type="link">删除</a-button>
                                </a-popconfirm>
                            </div>
                        </template>
                     </a-table>
              </a-descriptions-item>
            </a-descriptions>
        </div>
      </div>
      <template slot="footer">
          <div  style="text-align: center;" >
                <a-button type="primary"  @click="confirm(goods,specList)"  >
                {{goodsId==''?'添加商品':'修改商品'}} 
                </a-button>
          </div>
         
        <!-- <a-tabs default-active-key="1">
          <a-tab-pane key="1" tab="Details" />
          <a-tab-pane key="2" tab="Rule" />
        </a-tabs> -->
      </template>
    </a-page-header>
    </div>
</template>
<script>
import { columns } from './table';
import { queryGoodsInfo,updateGoodsInfo } from '@/api/mall/info';
import { queryGoodsPicture,updateGoodsPicture  } from '@/api/mall/picture';
import { querySpecTemplate,querySpecInfo,updateSpecInfo,querySpecRule,updateSpecRule } from '@/api/mall/spec';
import { queryClassify,querySpecialClassify  } from '@/api/mall/classify';
import { queryMake  } from '@/api/mall/make';
function getBase64(img, callback) {
  const reader = new FileReader();
  reader.addEventListener('load', () => callback(reader.result));
  reader.readAsDataURL(img);
}

function getBase64More(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = () => resolve(reader.result);
    reader.onerror = error => reject(error);
  });
}
export default {
    data () {
        return {
            columns,
            brandId:this.$route.query.brandId,
            goodsId:this.$route.query.id,
            name:"添加商品",
            goods:{
                goodsName:"",
                integral:"",
                freight:"",
                isGeneralMall:"1",
                isGroupWork:"0",
                isNewPeople:"0",
                makeId:"",
                groupBuyQuantityLimit:"1",
                isRecommend:"1",
                isMoreSpec:"0",
                status:"1",
                id:"",
                specTemplateId:"",
                specialCateId:"",
                cateId:"",
                sort: 99,
                groupSort: 0,
                newPeopleSort: 0,
            },//商品信息
          
          
            specTemplateList:[],//规格模版
            specTemplate:{}, //单规格
            specList:[],//商品规格
            classifyOneList:[],//产品分类
            classifyTwoList:[],
            specialCateList:[], //特殊分类i
             statusList: [
                { id: '1', name: '是'},
                { id: '0', name: '否'},
            ],
             specStatusList: [
                { id: '0', name: '单规格'},
                { id: '1', name: '多规格'},
               
            ],
            
            oneClassify:"",
            twoClassify:"",
            goodsBrandList:[],//商品品牌
             loading: false,
            
             goods_file:[],
              ruleNameList: [],
            ruleNameVisible: false,
            ruleNameInput: '',
            specNameOne:[],
            specNameOneVisible:false,
            specNameOneInput:"",
            specNameTwo:[],
            specNameTwoVisible:false,
            specNameTwoInput:"",
            ruleId:"", // 规则ID
            // 轮播图
            previewVisible: false,
            previewImage: '',
            bannerList:[],//商品轮播图
            detailPic:[],//商品详情图片
        };
    },
    created(){
        this.brandId=this.$route.query.brandId
         this.goodsId=this.$route.query.id
        if(this.$route.query.id!=''){
            this.getData()
            this._queryClassify(0,0)
             this._querySpecialClassify()
            this._queryGoodsPicture(0)
            this._queryGoodsPicture(1)
            this._querySpecTemplate()
            this._querySpecInfo()
            this._queryMake()
            this._querySpecRule()
           
        }else{
            this._queryClassify(0,0)
            this._querySpecialClassify()
            this._queryMake()
            this._querySpecTemplate()
        }
    },
    methods: {
         getData(){
            let _this = this
            const params = {
                'id':_this.goodsId,
                'brandId':_this.bççrandId
            }
            queryGoodsInfo(params)
            .then(res=>{
                if(res.success){
                    _this.goods = res.data.content[0]
                    if(res.data.content[0].preCateId!=0   ){
                        if( res.data.content[0].cateId!=null && res.data.content[0].cateId!='null'){
                            _this.oneClassify=Number(res.data.content[0].preCateId),
                            _this.twoClassify=Number(res.data.content[0].cateId)
                        }
                        if( res.data.content[0].specialCateId!=null && res.data.content[0].specialCateId != 'null'){
                         _this.goods.specialCateId=Number(res.data.content[0].specialCateId)
                        }
                        _this.goods.makeId=Number(res.data.content[0].makeId)
                        _this.goods.specTemplateId=Number(res.data.content[0].specTemplateId)
                        _this._queryClassify(res.data.content[0].preCateId,1)
                    }else{
                         _this.oneClassify=Number(res.data.content[0].cateId)
                          _this.twoClassify=undefined
                    }
                    // _this.goods.preCateId=Number(res.data.content[0].preCateId)
                    _this.name=res.data.content[0].goodsName
                }else{
                    _this.$notification['error']({
                        message: '提示',
                        description: res.errMessage,
                        duration: 8,
                    })
                }
            })
        },
        _queryGoodsPicture(type){  //获取轮播图和详情图
            let _this = this
            const params = {
                'goodsId':_this.goodsId,
                'brandId':_this.brandId,
                'type':type
            }
            queryGoodsPicture(params)
            .then(res=>{
                if(res.success){
                    if(type==0){
                        this.detailPic=[]
                        res.data.forEach((item,index) => {
                            item.url=item.imageUrl
                            item.uid= -(index+1),
                              item.status='done',
                             item.name='image.png'
                            this.detailPic.push(item)
                        });
                        
                    }else if(type==1){
                          this.bannerList=[]
                        res.data.forEach((item,index) => {
                            item.url=item.imageUrl
                            item.uid= -(index+1),
                              item.status='done',
                             item.name='image.png'
                            this.bannerList.push(item)
                        });
                    }
                }else{
                    _this.$notification['error']({
                        message: '提示',
                        description: res.errMessage,
                        duration: 8,
                    })
                }
            })
        },
        _querySpecTemplate(id){ //查询规格模版
            let _this = this
            const params = {
                'id':id,
                'brandId':_this.brandId,
                'size':99
            }
            querySpecTemplate(params)
            .then(res=>{
                if(res.success){
                    if(id){
                        this.specTemplate=res.data[0]
                    }else{
                        this.specTemplateList=res.data.content
                    }
                }else{
                    _this.$notification['error']({
                        message: '提示',
                        description: res.errMessage,
                        duration: 8,
                    })
                }
            })

        },
        specTempplatChange(index){
                this.specTemplateList.forEach(item => {
                        if(item.id==index){
                             if(item.ruleNameTwo){
                               this.ruleNameList=[item.ruleNameOne,item.ruleNameTwo]
                            }else{
                                this.ruleNameList=[item.ruleNameOne]
                            }
                             
                                this.specNameOne=[]
                                this.specNameTwo=[]
                                item.specNameOne.split(',').forEach(item => {
                                    this.specNameOne.push(item)
                                    });
                                item.specNameTwo.split(',').forEach(item => {
                                    this.specNameTwo.push(item)
                                });
                        }
                }); 
        },
        _querySpecRule(){
             let _this = this
                const params = {
                    'brandId':_this.brandId,
                    'goodsId':_this.goodsId
                }
                querySpecRule(params)
                .then(res=>{
                    if(res.success){
                        console.log(res,"商品规则")
                        if(res.data.length>0){
                            var items=res.data[0]
                            this.ruleId=items.id
                            this.ruleNameList=[items.ruleNameOne,items.ruleNameTwo]
                            this.specNameOne=[]
                            this.specNameTwo=[]
                            items.specNameOne.split(',').forEach(item => {
                            this.specNameOne.push(item)
                            });
                             items.specNameTwo.split(',').forEach(item => {
                            this.specNameTwo.push(item)
                        });
                        }
                        
                    }else{
                        _this.$notification['error']({
                            message: '提示',
                            description: res.errMessage,
                            duration: 8,
                        })
                    }
                })
        },
        _querySpecInfo(){
            
            let _this = this
            const params = {
                'brandId':_this.brandId,
                'goodsId':_this.goodsId
            }
            querySpecInfo(params)
            .then(res=>{
                if(res.success){
                    console.log(res.data,"查询商品规格信息")
                    _this.specList=res.data
                    
                }else{
                    _this.$notification['error']({
                        message: '提示',
                        description: res.errMessage,
                        duration: 8,
                    })
                }
            })
        },
        _queryClassify(parentId,type){
            let _this = this
            const params = {
                'parentId':parentId
            }
            queryClassify(params)
            .then(res=>{
                if(res.success){
                    if(type==0){
                        _this.classifyOneList=res.data.content
                    }else if(type==1){
                        _this.classifyTwoList=res.data.content
                    }
                }else{
                    _this.$notification['error']({
                        message: '提示',
                        description: res.errMessage,
                        duration: 8,
                    })
                }
            })
        },
        _querySpecialClassify(){
            let _this = this
            const params = {
                'brandId':_this.brandId
            }
            querySpecialClassify(params)
            .then(res=>{
                if(res.success){
                     _this.specialCateList=res.data.content
                }else{
                    _this.$notification['error']({
                        message: '提示',
                        description: res.errMessage,
                        duration: 8,
                    })
                }
            })
        },
        
        classifyOneChange(val){
            console.log(val)
             this._queryClassify(val,1)
        },
        _queryMake(){
            let _this = this
            const params = {
                'brandId':_this.brandId
            }
            queryMake(params)
            .then(res=>{
                if(res.success){
                    _this.goodsBrandList=res.data.content
                }else{
                    _this.$notification['error']({
                        message: '提示',
                        description: res.errMessage,
                        duration: 8,
                    })
                }
            })
        },
        
         handleChange(info) {
             this.goods_file=info.fileList
             console.log(info,"info")
            if (info.file.status === 'uploading') {
                this.loading = true;
                return;
            }
             getBase64(info.file.originFileObj, imageUrl => {
                    this.goods.defaultPicture = imageUrl;
                    this.loading = false;
                });
            },
        specChange(info,index){
            if (info.file.status === 'uploading') {
                    this.loading = true;
                    return;
                }
                this.specList.forEach(item => {
                    if(item.id==index){
                        getBase64(info.file.originFileObj, imageUrl => {
                            item.imageUrl = imageUrl;
                            item.originFileObj=info.file.originFileObj
                            this.loading = false;
                        });
                    }
                });
            console.log(this.specList)
        },

        // 轮播图
          // 选择图片
            handleCancel() {
            this.previewVisible = false;
            },
            async handlePreview(file) {
            if (!file.url && !file.preview) {
                file.preview = await getBase64More(file.originFileObj);
            }
            this.previewImage = file.url || file.preview;
            this.previewVisible = true;
            },
            bannerChange({ fileList }) {
            this.bannerList = fileList;
          },
        //   详情图
            picChange({ fileList }) {
                this.detailPic = fileList;
          },
        uploadBanner(type){
            var _this=this
            var list=this.bannerList
                if(type==0){
                    list=this.detailPic
                }
            list.forEach(item => {
                if(item.originFileObj){
                    var formData = new FormData()
                    formData.append('goodsId',this.goods.id)
                    formData.append('brandId',this.goods.brandId)
                    formData.append('type',type)
                    formData.append('file',item.originFileObj)
                }
                _this._updateGoodsPicture(formData)
            });
        },
        _updateGoodsPicture(formData){
            var _this=this
             updateGoodsPicture(formData)
                .then(res=>{
                    if(res.success){
                        _this.$notification['success']({
                            message: '提示',
                            description: '添加成功',
                            duration: 8,
                        })
                    }else{
                        _this.$notification['error']({
                            message: '提示',
                            description: res.errMessage,
                            duration: 8,
                        })
                    }
                })
        },
        removeBanner(val){
            if(val.id){
                var _this=this
                var formData = new FormData()
                formData.append('goodsId',this.goods.id)
                formData.append('brandId',this.goods.brandId)
                formData.append('type',val.type)
                formData.append('id',val.id)
                  formData.append('isDelete',1)
                   updateGoodsPicture(formData)
                    .then(res=>{
                        if(res.success){
                        
                            _this.$notification['success']({
                                message: '提示',
                                description: '删除成功',
                                duration: 8,
                            })
                        }else{
                            _this.$notification['error']({
                                message: '提示',
                                description: res.errMessage,
                                duration: 8,
                            })
                        }
                    })
            }
        },
        // 轮播图

        confirm(item,specList){
            var _this=this
             if(item.goodsName==''){
                _this.$message.warning('请输入商品品名称')
                 return
             }
              if(_this.twoClassify=='' && item.specialCateId=='' ){
                _this.$message.warning('请选择商品分类或者选择特殊分类')
                 return
             } 

             if(item.makeId==''){
                _this.$message.warning('请选择商品品牌')
                 return
             }
             if((item.isGroupWork==1 || item.isNewPeople==1 ) && item.isMoreSpec==1){
                 _this.$message.warning('拼团商品和新人专享商品不能设置多规格')
                 return
             }
             _this._updateSpecInfo(specList)
             _this.uploadBanner(0)
              _this.uploadBanner(1)
             var formData = new FormData()
                formData.append('id',item.id)
                formData.append('brandId',_this.brandId)
                formData.append('goodsName',item.goodsName)
                  formData.append('specTemplateId',item.specTemplateId)
                formData.append('integral',item.integral)
                formData.append('freight',item.freight)
                formData.append('isGeneralMall',item.isGeneralMall)
                formData.append('isGroupWork',item.isGroupWork)
                formData.append('isNewPeople',item.isNewPeople)
                formData.append('makeId',item.makeId)
                formData.append('cateId',_this.twoClassify)
                formData.append('groupBuyQuantityLimit',item.groupBuyQuantityLimit)
                formData.append('isRecommend',item.isRecommend)
                formData.append('isMoreSpec',item.isMoreSpec)
                formData.append('status',item.status)
                formData.append('specialCateId',item.specialCateId)
                formData.append('sort',item.sort)
                formData.append('groupSort',item.groupSort)
                formData.append('newPeopleSort',item.newPeopleSort)

                 _this.goods_file.forEach(item=>{
                    formData.append('file',item.originFileObj)
                })
            updateGoodsInfo(formData)
            .then(res=>{
                if(res.success){
                     if(_this.goodsId==''){
                        _this.goodsId=res.data.id
                        _this.goods=res.data
                       _this.specRadioChange()
                       _this.$router.go(-1)  
                    }else{
                       
                        _this.getData()
                        _this._queryGoodsPicture(0)
                        _this._queryGoodsPicture(1)
                        _this._querySpecInfo()
                        _this._querySpecRule()
                    }
                     _this.$notification['success']({
                        message: '提示',
                        description: _this.goodsId==''?'添加成功':'修改成功',
                        duration: 8,
                    })
                }else{
                    _this.$notification['error']({
                        message: '提示',
                        description: res.errMessage,
                        duration: 8,
                    })
                }
            })
        },
        specRadioChange(val){
            var _this=this
            if(_this.goods.isMoreSpec==0){
                const params = {
                'brandId':_this.brandId,
                'goodsId':_this.goodsId,
                'id':'-1',
            }
              _this._updateSpec(params)
           
            }
        },
        _updateSpecInfo(specList){//修改规格数据
            var _this=this
            specList.forEach((item,index) => {
                var formData = new FormData()
                formData.append('goodsId',item.goodsId)
                formData.append('groupPrice',item.groupPrice)
                formData.append('costPrice',item.costPrice)
                formData.append('id',item.id)
                formData.append('marketValue',item.marketValue)
                formData.append('newPeoplePrice',item.newPeoplePrice)
                formData.append('price',item.price)
                 formData.append('ruleId',item.ruleId)
                formData.append('ruleNameOne',item.ruleNameOne)
                formData.append('ruleNameTwo',item.ruleNameTwo)
                formData.append('salesVolume',item.salesVolume)
                formData.append('specNameOne',item.specNameOne)
                formData.append('specNameTwo',item.specNameTwo)
                formData.append('stock',item.stock)
                if(item.originFileObj){
                     formData.append('file',item.originFileObj)
                }
                 updateSpecInfo(formData)
                    .then(res=>{
                        if(res.success){
                            if(specList.length==index+1){
                                _this.$notification['success']({
                                    message: '提示',
                                    description: '添加成功',
                                    duration: 8,
                                })
                            }
                        }else{
                            _this.$notification['error']({
                                message: '提示',
                                description: res.errMessage,
                                duration: 8,
                            })
                        }
                    }) 
            });
        },
        // 删除规格数据
        delSpec(specList){
              var _this=this
            specList.forEach((item,index) => {
                var formData = new FormData()
                formData.append('id',item.id)
                formData.append('isDelete',1)
                 updateSpecInfo(formData)
                    .then(res=>{
                        if(res.success){
                            console.log(specList.length,"specList.length")
                             console.log(index,"index")
                            if(specList.length==index+1){
                                _this._querySpecInfo()
                                _this.$notification['success']({
                                    message: '提示',
                                    description: '删除成功',
                                    duration: 8,
                                })
                            }
                        }else{
                            _this.$notification['error']({
                                message: '提示',
                                description: res.errMessage,
                                duration: 8,
                            })
                        }
                    }) 
            });
        },
         //规格
        handleClosesRuleName(tag) { 
            this.ruleNameList.splice(this.ruleNameList.indexOf(tag), 1);
        },

      showRuleName() {
        this.ruleNameVisible = true;
        this.$nextTick(_ => {
          this.$refs.saveTagRuleName.$refs.input.focus();
        });
      },
      handleRuleNameConfirm() {
        let ruleNameInput = this.ruleNameInput;
        if (ruleNameInput) {
          this.ruleNameList.push(ruleNameInput);
        }
        this.ruleNameVisible = false;
        this.ruleNameInput = '';
      },
      //规格1
      handleCloseSpecNameOne(tag) { 
        this.specNameOne.splice(this.specNameOne.indexOf(tag), 1);
      },
      showSpecNameOne() {
        this.specNameOneVisible = true;
        this.$nextTick(_ => {
          this.$refs.saveTagSpecNameOne.$refs.input.focus();
        });
      },
      handleSpecNameOneConfirm() {
        let specNameOneInput = this.specNameOneInput;
        if (specNameOneInput) {
          this.specNameOne.push(specNameOneInput);
        }
        this.specNameOneVisible = false;
        this.specNameOneInput = '';
      },
      //规格2
      handleCloseSpecNameTwo(tag) { 
        this.specNameTwo.splice(this.specNameTwo.indexOf(tag), 1);
      },
      showSpecNameTwo() {
        this.specNameTwoVisible = true;
        this.$nextTick(_ => {
          this.$refs.saveTagSpecNameTwo.$refs.input.focus();
        });
      },
      handleSpecNameTwoConfirm() {
        let specNameTwoInput = this.specNameTwoInput;
        if (specNameTwoInput) {
          this.specNameTwo.push(specNameTwoInput);
        }
        this.specNameTwoVisible = false;
        this.specNameTwoInput = '';
      },
       // 生成规格
      _goodsSpecAdd(){
        var ruleNameOne,ruleNameTwo,_this=this
        if(this.ruleNameList.length==1){
          ruleNameOne=this.ruleNameList[0]
          ruleNameTwo=""
        }else if(this.ruleNameList.length==2){
          ruleNameOne=this.ruleNameList[0]
          ruleNameTwo=this.ruleNameList[1]
        }
             const params = {
                'brandId':_this.brandId,
                'goodsId':_this.goodsId,
                'ruleNameOne':ruleNameOne,
                'ruleNameTwo':ruleNameTwo,
                'specNameOne':String(_this.specNameOne),
                'specNameTwo':String(_this.specNameTwo),
                "templateId":_this.goods.specTemplateId,
                "id":_this.ruleId
            }
            updateSpecRule(params)
            .then(res=>{
                if(res.success){
                    _this.ruleId=res.data.id
                    _this._updateSpec(res.data)
                    _this.$notification['success']({
                        message: '提示',
                        description: _this.isAdd ? '添加成功' : '修改成功',
                        duration: 8,
                    })

                    _this.visible = false
                }else{
                    _this.$notification['error']({
                        message: '提示',
                        description: res.errMessage,
                        duration: 8,
                    })
                }
            })
      },
       _updateSpec(item){
            var _this=this
            var formData = new FormData()
                formData.append('goodsId',_this.goodsId)
                 formData.append('ruleId',item.id)
                
                 updateSpecInfo(formData) 
                    .then(res=>{
                        if(res.success){
                            _this._querySpecInfo()
                            _this.$notification['success']({
                                    message: '提示',
                                    description: '添加成功',
                                    duration: 8,
                                })
                        }else{
                            _this.$notification['error']({
                                message: '提示',
                                description: res.errMessage,
                                duration: 8,
                            })
                        }
                    }) 
        },
      
    }
}

</script>
<style scoped>
tr:last-child td {
  padding-bottom: 0;
}
#components-page-header-demo-responsive .content {
  display: flex;
}
#components-page-header-demo-responsive .ant-statistic-content {
  font-size: 20px;
  line-height: 28px;
}
@media (max-width: 576px) {
  #components-page-header-demo-responsive .content {
    display: block;
  }

  #components-page-header-demo-responsive .main {
    width: 100%;
    margin-bottom: 12px;
  }

  #components-page-header-demo-responsive .extra {
    width: 100%;
    margin-left: 0;
    text-align: left;
  }
}

</style>